<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>【OPPO FindX】 立即购买</title>
		
		<script type="text/javascript" src="static/js/jquery-1.12.4.min.js" ></script>
		<script>
			var i=0;
			var timer;
			$(function(){
				//显示第一张图片，其他图片隐藏
				$(".ig").eq(0).show().siblings().hide();
				 ShowTime();
				$(".tab").hover(function(){
					i=$(this).index();
					Show();
					clearInterval(timer);
				},function(){
					ShowTime();
				});
				btn1Clink();//往前翻页调用的方法
				btn2Clink();//往后翻页调用的方法
			});
			function btn1Clink(){
				$(".btn2").click(function(){
					clearInterval(timer);
					if(i==0){
						//进行判断，如果图片处在第一个则让i=5;然后i--;
						i=4;
					}
					i--;
					Show();//调用方法进行图片切换
					ShowTime();
				});
			}
			function btn2Clink(){
				$(".btn1").click(function(){
					clearInterval(timer);
					if(i==4){
						i=0;
					}
					i++;
					Show();
					ShowTime();
				});
			}
			function Show(){
				//切换图片的时候有过度效果，切除开始和切换结束时有0.3秒的过度效果
				$(".ig").eq(i).fadeIn(300).siblings().fadeOut(300);
				$(".tab").eq(i).addClass("bg").siblings().removeClass("bg");
			}
			function ShowTime(){
				timer=setInterval(function(){
					i++;
					if(i==5){
						i=0;
					}
					Show();
				},4000);
			}
		</script>
		<script type="text/javascript">
    var a = 1;
    function add() {
        a++;
        document.getElementById("txt").value = a;
    }
    function sub() {
        a--;
        document.getElementById("txt").value = a;
    }
</script>
<script type="text/javascript">
		$(document).ready(function() {
			var user_id=<%=request.getSession().getAttribute("user_id")%>;
			//alert("错误用户:" + user_id)
			if(user_id != "" && user_id != null){
				$.ajax({
					url:"FindImgControl",
	                type:"post",
	                data:{"user_id":user_id},
	                dataType : "json",
	                success:function(data){
	                	var strHtml = "";
	    				$.each(data, function(index, eachVal) {
	    					strHtml+="<img src='";
	    					strHtml+=eachVal.user_img;
	    					strHtml+="' style='height: 40px; width: 40px; border-radius: 20px; margin-top:10px'/>";
	    					
	    					strHtml+="<div id='nonelist'>";
		    					strHtml+="<ul style='list-style: none; margin: 0px; padding: 0px;'>";
			    					strHtml+="<li><a href='#'>个人中心</a></li>";
			    					strHtml+="<li><a href='CartItem.jsp'>我的购物车</a></li>";
			    					strHtml+="<li><a href='#'>我的订单</a></li>";
			    					strHtml+="<li><a href='ExitControl'>注销</a></li>";
		    					strHtml+="</ul>"
	    					strHtml+="</div>";
	    				});

	    				$(".right-button").html(strHtml);
	                }
				})
			}
		})
		
		</script>
<style>
		#nonelist li{
			text-align: center;
			margin-top: 1px;
			height: 10px;
		}
		#nonelist{
			position: absolute; 
			width: 80px;
			height:60px;
			top: 0px;
			right: -80px; 
			z-index: 4;
			display: block;
			border-radius: 10px;
			background-color: white;
		}
		
		#nonelist li a{
			font-size: 8px;
			
			text-decoration: none;
			color: #45494C;
		}
		#nonelist li a:hover{
			color: green;
		}
		.bann a:hover{
			color: green;
		}
		.buttonCollection a:hover{
			color: green;
		}
		.buttonCollection li img{
			margin-left:7px;
		}
		
	</style>
		<style type="text/css">
			.header{
				width: 100%;
				height: 60px;
				margin: 0;
				padding: 0;
				border-bottom-style: solid;
				border-bottom-color:#DCDCDC;
				border-bottom-width: 2px;
				
			}
			.topic{
				position: absolute;
				left: 159.6px;
				float: none;
				width: 1200px;
				height: 60px;
			}
			.Logo{
				float: left;
				width: 146px;
				height: 60px;
				margin: 0;
				padding: 0;
				
			}
			.content-logo{
				padding-top:10px ;
			     list-style-type: none;
				text-align: center;
				width: 126px;
				height: 19.2px;
				
			}
			
			.top{
				
			    padding-left: 120px;
				float:left ;
				width: 722.717px;
				height: 60px;
				text-align: center;
			}
			.nav{
				width: 100%;
				height: 60px;
				margin: 0;
				padding: 0;
				
			}
			.content{
				float: left;
				font-family: "黑体";
				font-weight: bolder;
				width: 90px;
				height: 40px;
				list-style-type: none;
				margin-top: 20px;
				position: relative;
				
			}
			.content a{
				display: block;
				color: black;
			    text-align: center;
				text-decoration: none;
			}
			.content a:hover{
				color: gainsboro;
			}
			.right-button{
				float: right;
				width: 42px;
				height: 60px;
				display: block;
				color: black;
			    text-align: center;
				text-decoration: none;
				position: relative;
			}
			.content-button{
				position: relative;
				margin-top: 10px;
				width: 100%;
				height: 40px;
				 list-style-type: none;
			}
			
			.content-button {
				display: block;
				color: black;
			    text-align: center;
				text-decoration: none;
			}
			.content-button img:hover{
				color: gainsboro;
			}
			.nav-last-one{
				float: left;
				display: none;
				position: absolute;
				z-index: 201;
				margin-left: -80px;
				width: 200px;
				height: 350px;
			
				list-style-type: none;
			   background-color: white;
			}
			.right-button:hover .nav-last-one{
				display: block;
				
			}
			.nav-last-one a{
				font: "微软雅黑";
				font-size: 20px;
				cursor: pointer;
			}
			.nav-last1 {
				
				width: 214.24.8px;
				height: 40px;
				margin-bottom: 20px;
				margin-top: 20px;
				border-bottom-style: solid;
				border-bottom-color:#DCDCDC;
				border-bottom-width: 2px;
			}
			.nav-last2{
				
				width: 214.24.8px;
				height: 40px;
				margin-bottom: 20px;
				margin-top: 20px;
				border-bottom-style: solid;
				border-bottom-color:#DCDCDC;
				border-bottom-width: 2px;
			}
			.nav-last3 {
			
				width: 214.24.8px;
				height: 40px;
				margin-bottom: 20px;
				margin-top: 20px;
				border-bottom-style: solid;
				border-bottom-color:#DCDCDC;
				border-bottom-width: 2px;
			}
			.nav-last4 {
		
				width: 214.24.8px;
				height: 40px;
				margin-bottom: 20px;
				margin-top: 20px;
				border-bottom-style: solid;
				border-bottom-color:#DCDCDC;
				border-bottom-width: 2px;
			}
			.nav-last5 {
		
				width: 214.24.8px;
				height: 40px;
				margin-bottom: 20px;
				margin-top: 20px;
				border-bottom-style: solid;
				border-bottom-color:#DCDCDC;
				border-bottom-width: 2px;
			}
			
			.nav-last1 img{
				float: left;
				width: 22.6333px;
				height: 24.8px;
			}
			.nav-last2 img{
				float: left;
				width: 22.6333px;
				height: 24.8px;
			}
			.nav-last3 img{
				float: left;
				width: 22.6333px;
				height: 24.8px;
			}
			.nav-last4 img{
				float: left;
				width: 22.6333px;
				height: 24.8px;
			}
			.nav-last5 img{
				float: left;
				width: 22.6333px;
				height: 24.8px;
			}
			
			.second{
				position: absolute;
				left: 159.6px;
				float: none;
				width: 1200px;
				height: 58px;
				border-bottom-style: solid;
				border-bottom-color:#DCDCDC;
				border-bottom-width: 2px;
			}
			.left{
				float: left;
				width: 30px;
				height: 30px;
				margin: 0;
				padding-top:20px;
				
			}
			.phone-name{
				text-align: center;
				font-family: "黑体";
				font-weight: bolder;
				font-size:18px ;
				width: 28.9667px;
				height: 22.4px;
				list-style-type: none;
				
				
			}
			.phone-name a{
				color: black;
				text-decoration: none;
				
			}
			.right{
				float: right;
				width: 150px;
				height: 20px;
				margin: 0;
				padding-top: 20px;
				
			}
			.phone-introduction{
				float: right;
				text-align: center;
				font-family:"黑体";
				font-weight: bolder;
				width: 80px;
				height: 16.8px;
				list-style-type: none;
			}
			.phone-introduction1{
				float: right;
				text-align: center;
				font-family:"黑体";
				font-weight: bolder;
				width: 50px;
				height: 16.8px;
				list-style-type: none;
			}
			.phone-introduction a{
				color: black;
				text-decoration: none;
			}
			.phone-introduction1 a{
				color: black;
				text-decoration: none;
			}
			.phone-introduction a:hover{
				color: gainsboro;
			}
			.phone-introduction1 a:hover{
				color: gainsboro;
			}
			.Infomation{
				
				position: absolute;
				left: 160px;
				float: none;
				width: 1200px;
				height: 1322.6px;
				margin-top: 62px;
				
				
			}
			.Infomation-right{
				float: right;
				background-color: white;
				width: 600px;
				height: 1322.6px;
				
			}
			.No-1-right{
				float: left;
				width: 500px;
				height: 240px;
				margin-top: 80px;
				margin-left: 80px;
				border-bottom-style: solid;
				border-bottom-color:#DCDCDC;
				border-bottom-width: 2px;
				
			}
			.No-1-right a{
				color: #FF8C00;
			}
			.No-1-right h1 a{
				font-size: 25px;
				color: black;
			}
			.Infomation-left{
				float: left;
				background-color: white;
				width: 600px;
				height: 1322.6px;
			}
			.No-1-left{
				position: relative;
				width: 560px;
				height: 560px;
				line-height: 560px;
				margin-top: 80px;
				
			}
			.ig{
				position: absolute;
				width: 560px;
				height: 560px;
			}
			.ig img{
				position: absolute;
				width: 560px;
				height: 560px;
			}
			.btn{
				position: absolute;
				width: 40px;
				height: 120px;
				color: #fff;
				font-size:60px;
				background: rgba(0,0,0,0.5);
				text-align: center;
				line-height: 100px;
				top: 200px;
				left: 50px;
				cursor: pointer;
			}
			.btn2{
				left:470px;
				
			}
			.btn1 p{
				position: absolute;
				top: -60px;
				left: 0px;
				width: 1px;
				height: 1px;
			}
			.btn2 p{
				position: absolute;
				top: -60px;
				left: 0px;
				width: 1px;
				height: 1px;
			}
			
			.tabs{
				position: absolute;
				top:600px ;
				left: 170px;
				float: right;
			}
			.tab{
				color: #fff;
				text-align: center;
				background-color: #00F;
				width: 40px;
				height: 40px;
				float: left;
				border-radius: 100%;
				line-height: 40px;
				margin-left: 10px;
				cursor: pointer;
			}
			.bg{
				background-color: #F00;
			}
			
			
			.No-2-right{
				float: left;
				width: 500px;
				height: 625px;
				margin-left: 80px;
				border-bottom-style: solid;
				border-bottom-width: 2px;
				border-bottom-color: #DCDCDC;
				position: relative;
			}
			.No-2-right-select{
				width: 492px;
				height: 400px;
				
			}
			.select-color{
				
				
				
				width: 492px;
				height: 20.8px;
				
			}
			.No-2-right-select li{
				list-style-type: none;
			}
			.select-1{
				float: left;
				width:234.4px;
				height: 42px;
				margin: 0;
				padding: 0;
				border-style: solid;
				border-width: 1px;
				border-color: #E5E5E5;
				position: relative;
			}
			
			.select-1 a{
				position: absolute;
				color: black;
			   text-decoration: none;
			   font-size: medium;
			   font-weight: 500;
			   top: 10px;
			   left: 90px;
			 
			}
			.select-2{
				float: right;
				width:234.4px;
				height: 42px;
				margin: 0;
				padding: 0;
				border-style: solid;
				border-width: 1px;
				border-color: #009900;
				position: relative;
			}
			.select-2:hover{
				border-color: #009900;
			}
			
			.select-2 a{
				position: absolute;
				color: black;
			   text-decoration: none;
			   font-size: medium;
			   font-weight: 500;
			   top: 10px;
			   left: 90px;
			 
			}
			.select-style{
				position: absolute;
				top: 90px;
				width: 492px;
				height: 20.8px;
				margin-bottom: 20px;
			}
			.select-3{
				float: left;
				width:234.4px;
				height: 42px;
				margin-top: 40px;
				
				padding: 0;
				border-style: solid;
				border-width: 1px;
				border-color: #E5E5E5;
				position: relative;
			}
			.select-3:hover{
				border-color: #009900;
			}
			
			.select-3 a{
				position: absolute;
				color: black;
			   text-decoration: none;
			   font-size: medium;
			   font-weight: 500;
			   top: 10px;
			   left: 90px;
			 
			}
			.select-4{
				float: right;
				width:234.4px;
				height: 42px;
				margin-top: 40px;
				padding: 0;
				border-style: solid;
				border-width: 1px;
				border-color:#009900 ;
				position: relative;
			}
			
			.select-4 a{
				position: absolute;
				color: black;
			   text-decoration: none;
			   font-size: medium;
			   font-weight: 500;
			   top: 10px;
			   left: 90px;
			 
			}
			.select-service{
				position: absolute;
				top: 170px;
				width: 492px;
				height: 20.8px;
				margin-bottom: 20px;
			}
			.select-5{
				float: left;
				width:234.4px;
				height: 42px;
				margin-top: 40px;
				
				padding: 0;
				border-style: solid;
				border-width: 1px;
				border-color: #E5E5E5;
				position: relative;
			}
			.select-5:hover{
				border-color: #009900;
			}
			
			.select-5 a{
				position: absolute;
				color: black;
			   text-decoration: none;
			   font-size: medium;
			   font-weight: 500;
			   top: 10px;
			  left: 60px;
			 
			}
			.select-6{
				float: right;
				width:234.4px;
				height: 42px;
				margin-top: 40px;
				padding: 0;
				border-style: solid;
				border-width: 1px;
				border-color: #E5E5E5;
				position: relative;
			}
			.select-6:hover{
				border-color: #009900;
			}
			
			.select-6 a{
				position: absolute;
				color: black;
			   text-decoration: none;
			   font-size: medium;
			   font-weight: 500;
			   top: 10px;
			   left: 60px;
			 
			}
			.select-7{
				float: left;
				width:234.4px;
				height: 42px;
				margin-top: 20px;
				
				padding: 0;
				border-style: solid;
				border-width: 1px;
				border-color: #E5E5E5;
				position: relative;
			}
			.select-7:hover{
				border-color: #009900;
			}
			
			.select-7 a{
				position: absolute;
				color: black;
			   text-decoration: none;
			   font-size: medium;
			   font-weight: 500;
			   top: 10px;
			   left: 60px;
			 
			}
			.select-8{
				float: right;
				width:234.4px;
				height: 42px;
				margin-top: 20px;
				padding: 0;
				border-style: solid;
				border-width: 1px;
				border-color: #E5E5E5;
				position: relative;
			}
			.select-8:hover{
				border-color: #009900;
			}
			
			.select-8 a{
				position: absolute;
				color: black;
			   text-decoration: none;
			   font-size: medium;
			   font-weight: 500;
			   top: 10px;
			   left: 60px;
			 
			}
			.select-9{
				float: left;
				width:234.4px;
				height: 42px;
				margin-top: 20px;
				
				padding: 0;
				border-style: solid;
				border-width: 1px;
				border-color: #E5E5E5;
				position: relative;
			}
			.select-9:hover{
				border-color: #009900;
			}
			
			.select-9 a{
				position: absolute;
				color: black;
			   text-decoration: none;
			   font-size: medium;
			   font-weight: 500;
			   top: 10px;
			   left: 60px;
			 
			}
			
			.photo img{
				width: 500px;
				height: 500px;
				align-content: center;
			}
			.number{
				width: 253px;
				height: 50px;
				margin: 0;
				padding: 0;
			}
			
			.number input{
				float: none;
				width: 195px;
				height: 45px;
				border-style: solid;
				border-width: 2.2px;
				
				text-align: center;
				margin: 0;
				padding: 0;
			}
			.number-left {
				text-align: center;
				font-size: 25px;
				float: right;
				width: 23px;
				height: 45px;
				border-style: solid;
				border-width: 2px;
				border-color: #DCDCDC;
				cursor: pointer;
				margin: 0;
				
			}
			
			
			.number-right {
				text-align: center;
				font-size: 25px;
				float: left;
				width: 22.4px;
				height: 45px;
				border-style: solid;
				border-width: 2px;
				border-color: #DCDCDC;
				cursor: pointer;
				margin: 0;
				
			}
			.No-3-right{
				float: left;
				width: 500px;
				height: 400px;
				margin-left: 80px;
			}
			.color-left{
				float: left;
				width: 230px;
				height: 60px;
				margin-top: 80px;
				background-color: #DCDCDC;
				border-style: solid;
				border-width: 1px;
				border-color: #E5E5E5;
				position: relative;
				
			}
			.color-left:hover{
				background-color: darkgray;
			}
			.color-left a{
				position: absolute;
				left: 70px;
				top:16px ;
				color: black;
				
				font-size: 20px;
				text-decoration: none;
			}
			.color-right{
				float: right;
				width: 230px;
				height: 60px;
				margin-top: 80px;
				background-color: #0079ff;
				border-style: solid;
				border-width: 1px;
				border-color: #E5E5E5;
				position: relative;
			}
			.color-right:hover{
				background-color: green;
			}
			.color-right a{
				color: white;
				position: absolute;
				left: 70px;
				top:16px ;
				font-size: 20px;
				text-decoration: none;
			}
			.third{
				margin-top: 1385.6px;
				width: 100%;
				height: 5373.5px;
				background-color: #DCDCDC;
			}
			.photo-fianly{
				position: absolute;
				left: 159.6px;
				margin-top: 50px;
				width: 1200px;
				height: 8123.5px;
				background-color: white;
			}
			.photo-1{
				position: absolute;
				left: 22px;
				width: 1156px;
				height: 229px;
			}
			.photo-2{
				margin-top: 229px;
				position: absolute;
				left: 22px;
				width: 1156px;
				height: 616.5px;
			}
			.photo-3{
				margin-top: 845.5px;
				position: absolute;
				left: 22px;
				width: 1156px;
				height: 773.5px;
			}
			.photo-4{
				margin-top: 1619px;
				position: absolute;
				left: 22px;
				width: 1156px;
				height: 779.5px;
			}
			.photo-5{
				margin-top: 2398.5px;
				position: absolute;
				left: 22px;
				width: 1156px;
				height: 808.5px;
			}
			.photo-6{
				margin-top: 3207px;
				position: absolute;
				left: 22px;
				width: 1156px;
				height: 732.5px;
			}
			.photo-7{
				margin-top: 3939.5px;
				position: absolute;
				left: 22px;
				width: 1156px;
				height: 681.5px;
			}
			.photo-8{
				margin-top: 4621px;
				position: absolute;
				left: 22px;
				width: 1156px;
				height: 675.5px;
			}
			.photo-9{
				margin-top: 5296.5px;
				position: absolute;
				left: 22px;
				width: 1156px;
				height: 717.5px;
			}
			.photo-10{
				margin-top: 6014px;
				position: absolute;
				left: 22px;
				width: 1156px;
				height: 720px;
			}
			.photo-11{
				margin-top: 6734px;
				position: absolute;
				left: 22px;
				width: 1156px;
				height: 769.5px;
			}
			.photo-12{
				margin-top: 7503.5px;
				position: absolute;
				left: 22px;
				width: 1156px;
				height: 620px;
			}
			.foot{
				width: 100%;
				height: 437.4px;
				background-color: white;
			}
			.foot-top{
				position: absolute;
				left: 159.6px;
				margin-top: 50px;
				
				width: 1200px;
				height: 195.6px;
			}
			.foot-left{
				float: left;
				width: 744px;
				height: 195.6px;
				
			}
			.foot-right{
				float: right;
				width: 173px;
				height: 116.2px;
				
			}
			.foot-left-1{
				float: left;
				width: 185.267px;
				height: 195.6px;
				margin: 0;
				padding: 0;
				
			}
			.foot-left-top-content{
				
				list-style-type: none;
				width: 185.267px;
				height: 14px;
				margin-bottom:10px;
			}
			.foot-left-top-content a{
				text-decoration: none;
				font-weight: bolder;
				color: black;
			}
			
			
			.foot-left-content{
				
				list-style-type: none;
				width: 171.267px;
				height: 28.6px;
			}
			
			
			.foot-left-content a{
				text-decoration: none;
				color: black;
			}
			.foot-left-content a:hover{
				color: gainsboro;
			}
			.foot-left-2{
				float: left;
				width: 185.283px;
				height: 195.6px;
				margin: 0;
				padding: 0;
			}
			.foot-left-3{
				float: left;
				width: 185.283px;
				height: 195.6px;
				margin: 0;
				padding: 0;
			}
			.foot-left-4{
				float: left;
				width: 185.283px;
				height: 195.6px;
				margin: 0;
				padding: 0;
			}
			.foot-right-one{
				width: 100%;
				height: auto;
			}
			.foot-right-top-content{
				list-style-type: none;
				width: 173px;
				height: 24px;
			}
			.foot-right-top-content a{
				text-decoration: none;
				color: black;
				font-weight: bolder;
			}
			
			.foot-right-content{
				list-style-type: none;
				width: 173px;
				height: 19.2px;
			}
			.foot-right-content a{
				text-decoration: none;
				color: black;
				
			}
			
			.foot-last{
				position: absolute;
				left: 159.6px;
				margin-top: 350px;
				width: 1200px;
				height: 100px;
				border-top-style: solid;
				border-top-color:#DCDCDC;
				border-top-width: 2px;
			}
			.foot-last p{
				width: 100%;
				height: auto;
				
			}
			.content1{
				float: left;
				font-family: "黑体";
				font-weight: bolder;
				width: 90px;
				height: 40px;
				list-style-type: none;
				margin-top: 20px;
				position: relative;
				
			}
			.content1 a{
				display: block;
				color: black;
			    text-align: center;
				text-decoration: none;
			}
			.content1 a:hover{
				color: gainsboro;
			}
			.hide-second-nav{
				float: left;
				display: none;
				position: absolute;
				z-index: 200;
				margin-left: -420px;
				width: 1470px;
				height: 465px;
				margin-top: 21.5px;
				list-style-type: none;
			    background-color: #E3E3E3;
			}
			.content1:hover .hide-second-nav{
				display: block;
				
			}
			.hide-photo-1 img{
				display: block;
				position: absolute;
				top:50px ;
				left: 159.6px;
				float: left;
				width: 464px;
				height: 354.6px;
				z-index: 0;
			}
			.hide-photo-1-1 img{
				display: block;
				position: absolute;
				top:50px ;
				left: 159.6px;
				float: left;
				width: 464px;
				height: 354.6px;
				z-index: 1;
			}
			.hide-photo-2 img{
				display: block;
				position: absolute;
				top:50px ;
				left: 633.6px;
				float: left;
				width:172px;
				height: 172px;
				z-index: 0;
			}
			.hide-photo-2-1 img{
				display: block;
				position: absolute;
				top:50px ;
				left: 633.6px;
				float: left;
				width: 172px;
				height: 172px;
				z-index: 1;
			}
			.hide-photo-3 img{
				display: block;
				position: absolute;
				top:232px ;
				left: 633.6px;
				float: left;
				width:172px;
				height: 172px;
				z-index: 0;
			}
			.hide-photo-3-1 img{
				display: block;
				position: absolute;
				top:232px ;
				left: 633.6px;
				float: left;
				width: 172px;
				height: 172px;
				z-index: 1;
			}
			.hide-photo-4 img{
				display: block;
				position: absolute;
				top:50px ;
				left: 815.6px;
				float: left;
				width:172px;
				height: 172px;
				z-index: 0;
			}
			.hide-photo-4-1 img{
				display: block;
				position: absolute;
				top:50px ;
				left: 815.6px;
				float: left;
				width: 172px;
				height: 172px;
				z-index: 1;
			}
			.hide-photo-5 img{
				display: block;
				position: absolute;
				top:232px ;
				left: 815.6px;
				float: left;
				width:172px;
				height: 172px;
				z-index: 1;
			}
			.hide-photo-5-1 img{
				display: block;
				position: absolute;
				top:232px ;
				left: 815.6px;
				float: left;
				width: 172px;
				height: 172px;
				z-index: 0;
			}
			.hide-photo-6 img{
				display: block;
				position: absolute;
				top:50px ;
				left: 997.6px;
				float: left;
				width:172px;
				height: 172px;
				z-index: 0;
			}
			.hide-photo-6-1 img{
				display: block;
				position: absolute;
				top:50px ;
				left: 997.6px;
				float: left;
				width: 172px;
				height: 172px;
				z-index: 1;
			}
			.hide-photo-7 img{
				display: block;
				position: absolute;
				top:232px ;
				left: 997.6px;
				float: left;
				width:172px;
				height: 172px;
				z-index: 0;
			}
			.hide-photo-7-1 img{
				display: block;
				position: absolute;
				top:232px ;
				left: 997.6px;
				float: left;
				width: 172px;
				height: 172px;
				z-index: 1;
			}
			.hide-photo-8 img{
				display: block;
				position: absolute;
				top:50px ;
				left: 1179.6px;
				float: left;
				width:172px;
				height: 172px;
				z-index: 0;
			}
			.hide-photo-8-1 img{
				display: block;
				position: absolute;
				top:50px ;
				left: 1179.6px;
				float: left;
				width: 172px;
				height: 172px;
				z-index: 1;
			}
			.hide-photo-9 img{
				display: block;
				position: absolute;
				top:232px ;
				left: 1179.6px;
				float: left;
				width:172px;
				height: 172px;
				z-index: 0;
			}
			.hide-photo-9-1 img{
				display: block;
				position: absolute;
				top:232px ;
				left: 1179.6px;
				float: left;
				width: 172px;
				height: 172px;
				z-index: 1;
			}
			a{
				text-decoration: none;
				color:black;
			}
		</style>
	</head>
	<body>
		<div class="header">
			
			<div class="topic">
				
			    <div class="Logo">
				        <li class="content-logo"><a  href="index.jsp"><img src="static/img/oppo-Logo.png"></a></li>
			    </div>
			    
			    <div class="top">
			        <ul class="nav">
				
				        <li class="content1"><a href="#">手机</a>
				        	<ul class="hide-second-nav">
				        		<li  class="hide-photo-1"><img src="static/img/hide1.jpg" href="#"></li>
				        		<li class="hide-photo-1-1"><img src="static/img/hide1-1.png" href="#"></li>
				        		<li class="hide-photo-2"><img src="static/img/hide2.jpg" href="#"></li>
				        		<li class="hide-photo-2-1"><img src="static/img/hide2-1.png" href="#"></li>
				        		<li class="hide-photo-3"><img src="static/img/hide3.jpg" href="#"></li>
				        		<li class="hide-photo-3-1"><img src="static/img/hide3-1.png" href="#"></li>
				        		<li class="hide-photo-4"><img src="static/img/hide4.jpg" href="#"></li>
				        		<li class="hide-photo-4-1"><img src="static/img/hide4-1.png" href="#"></li>
				        		<li class="hide-photo-5"><img src="static/img/hide5.png" href="#"></li>
				        		<li class="hide-photo-5-1"><img src="static/img/hide5-1.jpg" href="#"></li>
				        		<li class="hide-photo-6"><img src="static/img/hide6.jpg" href="#"></li>
				        		<li class="hide-photo-6-1"><img src="static/img/hide6-1.png" href="#"></li>
				        		<li class="hide-photo-7"><img src="static/img/hide7.png" href="#"></li>
				        		<li class="hide-photo-7-1"><img src="static/img/hide7-1.png" href="#"></li>
				        		<li class="hide-photo-8"><img src="static/img/hide8.jpg" href="#"></li>
				        		<li class="hide-photo-8-1"><img src="static/img/hide8-1.png" href="#"></li>
				        		<li class="hide-photo-9"><img src="static/img/hide9.jpg" href="#"></li>
				        		<li class="hide-photo-9-1"><img src="static/img/hide9-1.png" href="#"></li>
				        		
				        	</ul>
				        </li>
				        <li class="content"><a href="#">品牌</a></li>
				        <li class="content"><a href="#">商城</a></li>
				        <li class="content"><a href="#">体验店</a></li>
				        <li class="content"><a href="#">服务</a></li>
				        <li class="content"><a href="#">社区</a></li>
				        <li class="content"><a href="#">ColorOS</a></li>
				        <li class="content"><a href="#">云服务</a></li>
				    
			        </ul>
			    </div>
			    
			    <div class="right-button">
			    	<li class="content-button"><a href="#"><img src="static/img/buttun.png" ></a>
			    		<ul class="nav-last-one">
			    			<li class="nav-last1"><img src="static/img/nav-last1.png"><a href="CartItem.jsp">购物车</a></li>
			    			<li class="nav-last2"><img src="static/img/nav-last2.png"><a>我的订单</a></li>
			    			<li class="nav-last3"><img src="static/img/nav-last3.jpg"><a>回收单</a></li>
			    			<li class="nav-last4"><img src="static/img/nav-last-4.jpg"><a>个人中心</a></li>
			    			<li class="nav-last5"><img src="static/img/nav-last-5.png"><a href="login.html">登录</a></li>
			    		</ul>
			    	</li>
			    </div>
			    
			</div>
			
		</div>
		<div class="second">
			
			<div class="left">
				<li class="phone-name" ><a href="#" style="cursor:auto">FindX</a></li>
			</div>
			
			<div class="right">
				<li class="phone-introduction"><a href="#">技术规格</a></li>
				<li class="phone-introduction1"><a href="#">概览</a></li>
			</div>
			
		</div>
		
		<div class="Infomation">
			
			<div class="Infomation-left">
				<div class="No-1-left">
				     <div class="ig"><img src="static/img/findx_mid_1.png"></div>
				      <div class="ig"><img src="static/img/findx_mid_2.png"></div>
				       <div class="ig"><img src="static/img/findx_mid_3.png"></div>
				        <div class="ig"><img src="static/img/findx_mid_4.png"></div>
				</div>
				<!--左右切换-->
				<div class="btn btn1"><p><</p></div>
				<div class="btn btn2"><p>></p></div>
				
				<div class="tabs">
					<div class="tab bg">1</div>
					<div class="tab">2</div>
					<div class="tab">3</div>
					<div class="tab">4</div>
				</div>
			</div>
			
			
			
			<div class="Infomation-right">
				
				<div class="No-1-right">
					<h2>Find X 超闪版冰珀蓝  </h2>
					<h4><a>【享 6 期免息 I 8G+256G I 超级闪充】</a> 定制版配件 O-Free 无线耳机正在热卖。</h4>
					<h1><a>￥</a>5999.00</h1>
					<h4>商品支持： 花呗分期 6 期免息 以旧换新</h4>
				</div>
				
			<div class="No-2-right">
					
				<div class="No-2-right-select">
					<p class="select-color">颜色</p>
					
					<li class="select-1"><a href="FindX_infomation_1.jsp">波尔多红</a></li>
				    <li class="select-2"><a href="FindX_infomation_2.jsp">冰珀蓝</a></li>
				    
					<p class="select-style">配置</p>
					
					<li class="select-3"><a href="FindX_infomation_4.jsp">8G+128G</a></li>
					<li class="select-4"><a href="FindX_infomation_2.jsp">8G+256G</a></li>
					
					<p class="select-service">服务</p>
					
					<li class="select-5"><a href="#">延长保半年 ￥79</a></li>
					<li class="select-6"><a href="#">延长保一年 ￥129</a></li>
					<li  class="select-7" ><a href="#">屏碎保一年 ￥129</a></li>
					<li  class="select-8"><a href="#">后盖保一年 ￥59</a></li>
					<li  class="select-9"><a href="#">OPPO Care ￥199</a></li>
					
				</div>
				<p >选择数量</p>
				<form id="formt">
					  <div class="number">
						     <a class="number-right" onclick="javascript:sub()">-</a>
						     <input type="text" name="product_count" id="txt" value="1" />
					         <a class="number-left"  onclick="javascript:add()">+</a>
                      </div>
				
					<input type="hidden" name="product_color" id="colorss" value="冰魄蓝" />
					<input type="hidden" name="product_model" id="modell" value="OPPO Find X 8G+256G" />
					
				</form>
			</div>
				<div class="No-3-right">
					<p class="color-left"><a id= "sum1" href = "#">加入购物车</a></p> 
					<p class="color-right"><a href="#">立即购买</a></p>
				</div>
			</div>
		</div>
		<div class="third">
			<div class="photo-fianly">
				<img class="photo-1" src="static/img/findx_bottle_1.jpg" />
				<img class="photo-2" src="static/img/findx_bottle_2.jpg" />
				<img class="photo-3" src="static/img/findx_bottle_3.jpg" />
				<img class="photo-4" src="static/img/findx_bottle_4.jpg" />
				<img class="photo-5" src="static/img/findx_bottle_5.jpg" />
				<img class="photo-6" src="static/img/findx_bottle_6.jpg" />
				<img class="photo-7" src="static/img/findx_bottle_7.jpg" />
				<img class="photo-8" src="static/img/findx_bottle_8.jpg" />
				
			</div>
		</div>
		<div class="foot">
			<div class="foot-top">
				<div class="foot-left">
					<ul class="foot-left-1">
						<li class="foot-left-top-content"><a href="#">推荐机型</a></li>
						<li class="foot-left-content"><a href="#">R17</a></li>
						<li class="foot-left-content"><a href="#">Find X</a></li>
						<li class="foot-left-content"><a href="#">A7x</a></li>
						<li class="foot-left-content"><a href="#">A5</a></li>
						<li class="foot-left-content"><a href="#">A3</a></li>
						<li class="foot-left-content"><a href="#">A1</a></li>
					</ul>
					
					<ul class="foot-left-2">
						<li class="foot-left-top-content"><a href="#">服务</a></li>
						<li class="foot-left-content"><a href="#">以旧换新</a></li>
						<li class="foot-left-content"><a href="#">服务网点查询</a></li>
						<li class="foot-left-content"><a href="#">零配件价格查询</a></li>
						<li class="foot-left-content"><a href="#">官网授权网点</a></li>
						<li class="foot-left-content"><a href="#">预置软件公示</a></li>
					</ul>
					
					<ul class="foot-left-3">
						<li class="foot-left-top-content"><a href="#">关于我们</a></li>
						<li class="foot-left-content"><a href="#">关于 OPPO</a></li>
						<li class="foot-left-content"><a href="#">新闻资讯</a></li>
						<li class="foot-left-content"><a href="#">媒体网络</a></li>
						<li class="foot-left-content"><a href="#">加入我们</a></li>
						<li class="foot-left-content"><a href="#">反馈安全问题</a></li>
					</ul>
					
					<ul class="foot-left-4">
						<li class="foot-left-top-content"><a href="#">商务合作</a></li>
						<li class="foot-left-top-content"><a href="#">平台相关</a></li>
						<li class="foot-left-top-content"><a href="#">采购相关</a></li>
						
					</ul>
				</div>
				
				<div class="foot-right">
					<ul class="foot-right-one">
						<li class="foot-right-top-content"><a href="#">4001-666-888</a></li>
						<li class="foot-right-content"><a href="#">24小时全国热线</a></li>
					</ul>
				</div>
			</div>
			
			<div class="foot-last">
				<p> 2005 - 2018 OPPO 版权所有 粤ICP备08130115号-1 联系方式：4001-666-888</p>
			</div>
		</div>
		<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
	    <script src="static/layui/layui.js"></script>
	    <script src="static/layui/layui.all.js"></script>
		<script type="text/javascript">
			function addsuccessinfo() {
		        layer.msg('加入购物车成功！');
		    }
			function nouser() {
		        layer.msg('请先登录！');
		    }
			$("#sum1").click(function(){
				
				$.ajax({
					url: "AddCarItemControl",
	                type: "POST",
	                data: $("#formt").serialize(),
	                success:function(data){
	                	if(data == "true"){
	                		addsuccessinfo();
	                	}
	                	else{
	                		nouser();
	                	}
	                }
				})
			})
		</script>
	</body>
</html>
